<template>
  <div id="app">
    <div class="top">
      人机共生的社会网络行为分析
      <img src="./assets/logo_img.png" />
      <div class="timeStop">数据截至：2020-9-30 00:00:00</div>
      <div class="time">{{time}}</div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      time: null
    };
  },
  mounted() {
    this.getData();
  },

  methods: {
    getData() {
      var t = new Date(); //创建一个date的对象，才可以引用相关的date
      var y = t.getFullYear();

      var month = t.getMonth() + 1;
      var d = t.getDate();
      var h = t.getHours();

      var m = t.getMinutes();

      var s = t.getSeconds();

      this.time = y + "-" + month + "-" + d + " " + h + ":" + m + ":" + s;

      let _this = this;

      setTimeout(() => {
        _this.getData();
      }, 1000);
    }
  }
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}
#app {
  width: 100%;
  height: 100%;
  background: url("./assets/1.png") center center no-repeat;
  background-size: cover;
}
.top {
  line-height: 80px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  position: relative;
  background: url("./assets/11.png") center center no-repeat;
  background-size: 158% 140%;
}
.top img {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 200px;
}
.timeStop {
  position: absolute;
  bottom: 10px;
  left: 20px;
  font-size:16px;
  line-height: 1;
}
.time {
  position: absolute;
  right: 30px;
  top: 22px;
  font-size:16px;
}
</style>
